<template>
  <div>
    <Card>
      <span slot="title">管理员信息 </span>
      <div slot="title1">
        <div>管理员ID：{{ info.id }}</div>
        <el-divider></el-divider>
        <div>账号：{{ info.account }}</div>
        <el-divider></el-divider>
        <div>用户组：{{ info.userGroup }}</div>
        <el-divider></el-divider>
        <div>创建时间：{{ info.ctime | timer }}</div>
        <el-divider></el-divider>
        <div class="box">
          <div>管理员头像：</div>
          <div>
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:5000/users/avatar_upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="lujing+imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="fn">上传图片</el-button>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
    
//引入公用卡片
import Card from "@/components/Card.vue";
//引入列表接口
import moment from "moment"
//修改图片接口apixg_js
import { apixgps_js } from "@/utils/api.js";
import local from "@/utils/sess.js"
export default {
  components: {
    Card,
  },
  data() {
    return {
        lujing : "http://127.0.0.1:5000/upload/imgs/acc_img/",
      imageUrl: "",
      info: {
        account: "",
        ctime: "",
        id: "",
        userGroup: "",
      },
    };
  },
  methods: {
   async fn() {
      //结构出图片
          let {code} = await apixgps_js({
              imgUrl:this.imageUrl,
              
     }) 
     
     //发送
     this.$bus.$emit("srurl")
     console.log(code)
    },
    //图像上传成功之后的函数
    handleAvatarSuccess(val) {
      //定义一个照片路径
      //上传成功之后看他的状态
      console.log(val);
      //结构渲染
      let { msg, imgUrl, code } = val;
 
      //上传成功之后弹出一个窗口
    console.log(imgUrl)
      if (code === 0) {
           this.imageUrl =  imgUrl;
        this.$message({
          type: "success",
          message: msg,
          //成功之后再把图片渲染到页面
          
        });
        
      } else {
        this.$message.error(msg);
      }
    },
    //图像上传公共之前的函数
    beforeAvatarUpload() {},
    //再创建之后就调用
  },

  //再创建之后加载函数
  created() {
   let info2 = JSON.parse(local.get("info"));
   this.info = info2
  },
    filters:{
        timer(val){
            return moment(val).format("YYYY -MM -DD  HH:mm")
        }
    }
  //点击修改图片把图片渲染到上面的头像
};
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.box {
  display: flex;
}
</style>